<template>
  <svg ref="svgRef" :width="width" :height="height"></svg>
</template>
<script setup lang="ts">

import { ref, onMounted } from 'vue';
import * as d3 from 'd3';

const width=400, height=400;
const svgRef = ref<SVGSVGElement|null>(null);

onMounted(()=>{
  if(!svgRef.value) return;

  const svg = d3.select(svgRef.value);
  const data=[{axis:'数学',value:80},{axis:'语文',value:90},{axis:'英语',value:70},{axis:'逻辑',value:85},{axis:'合作',value:75}];
  const radius=Math.min(width,height)/2-40;
  const angleSlice=2*Math.PI/data.length;
  const rScale=d3.scaleLinear().range([0,radius]).domain([0,100]);
  const g=svg.append('g').attr('transform',`translate(${width/2},${height/2})`);

  // Draw grid
  const levels=5;
  for(let lvl=1;lvl<=levels;lvl++){
    g.append('circle').attr('r',radius*(lvl/levels)).attr('fill','none').attr('stroke','#CDCDCD');
  }

  // Axis lines and labels
  data.forEach((d,i)=>{
    const angle=angleSlice*i - Math.PI/2;
    g.append('line').attr('x1',0).attr('y1',0)
      .attr('x2',rScale(100)*Math.cos(angle)).attr('y2',rScale(100)*Math.sin(angle))
      .attr('stroke','grey');
    g.append('text').attr('x', (rScale(100+10)*Math.cos(angle)))
      .attr('y',(rScale(100+10)*Math.sin(angle))).text(d.axis)
      .style('font-size','12px').attr('text-anchor','middle');
  });
  
  // Radar area
  const radarLine=d3.lineRadial<any>()
    .radius((d:any)=>rScale(d.value)).angle((_:any,i:number)=>i*angleSlice);
  g.append('path').datum(data)
    .attr('d',radarLine as any)
    .attr('fill','rgba(34,202,236,0.3)').attr('stroke','#22CAEC');
});
</script>
<style scoped>svg{width:100%;height:100%;}</style>